<template>
  <div class="person">
    <h2>姓名：{{ obj.name }}</h2>
    <h2>年龄：{{ obj.age }}</h2>
    <button @click="editName">修改姓名</button>
    <button @click="editAge">修改年龄</button>
    <button @click="showDetail">查看详细信息</button>
  </div>
</template>
<script setup lang="ts" name="person">
import { ref, reactive, computed, watch } from "vue";
const obj = reactive({
  name: "张三",
  age: 18,
  tel: "13992466785",
});
function editName() {
  obj.name = "李四";
}
function editAge() {
  obj.age += 10;
}
function showDetail() {
  alert(obj.tel);
}
</script>
<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>
